<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
</head>

<body>
    <div class="" id="app">
        <template>
            <i-Table :context="self" :data="tableData1" :columns="tableColumns1" stripe>
            </i-Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="100" :current="1" @on-change="changePage"></Page>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        self: this,
        tableData1: [{
            name: '',
            size: Math.floor(Math.random() * 3 + 1)
        }],
        tableColumns1: [{
                title: '职位名称',
                key: 'name'
            }, {
                title: '人数',
                key: 'size',
                render(row) {
                    return `1`;
                }
            }, {
                title: '操作',
                key: 'action',
                width: 120,
                render(row) {
                    return `<i-button type="text" size="small" @click="alert(row.name)">编辑</i-button><i-button type="text" size="small">删除</i-button>`;
                }
            }

        ]
    },
    methods: {
        getTableData() {
           
            return data;
        },
        formatDate(date) {
           
        },
        changePage() {
            // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
            this.tableData1 = this.mockTableData1();
        }
    }
});
</script>

</html>
